import React, {useState} from 'react';
import LoginPage from "./index";
import {Input, Form, Button, Row, Col, Tabs} from 'antd';
import {UserOutlined, LockOutlined, MobileOutlined, SafetyCertificateOutlined} from '@ant-design/icons';
import GetCaptchaButton, {useGetCaptchaButton} from "./components/GetCaptchaButton";

function LoginPagePhone(props) {
    const {
        size = 'large',
        api,
        getCodeApi,
        phoneKey = 'phone',
        codeKey = 'code',
        redirect = '/',
        initLoginType = 'code',
        canSwitchType = true,
        usernameKey = 'username',
        passwordKey = 'password',
        ...layoutProps
    } = props;

    const [loginType, setLoginType] = useState(initLoginType)

    const [form] = Form.useForm();

    const onFinish = (result) => {
        const data = loginType === 'code' ? {
                [phoneKey]: result.phone,
                [codeKey]: result.code,
            } :
            {
                [usernameKey]: result.username,
                [passwordKey]: result.password,
            };
        $request(api, {
            type: loginType,
            ...data
        }).then(() => {
            location.replace(redirect);
        })
    }

    const getCaptchaButtonProps = useGetCaptchaButton({
        getCaptchaUrl: getCodeApi,
        beforeGet: async () => {
            const {phone} = await form.validateFields(['phone']);
            // const captchaToken = await getCaptchaToken();
            const captchaToken = undefined;
            return {phone, captchaToken};
        },
    });

    return (
        <LoginPage {...layoutProps}>
            <Form onFinish={onFinish} form={form}>
                <Tabs activeKey={loginType} onChange={setLoginType}>
                    <Tabs.TabPane key="password" tab="密码登录">
                        {
                            loginType === 'password' &&
                            <>
                                <Form.Item name="username" rules={[{required: true, message: '请输入账号'}]}>
                                    <Input prefix={<UserOutlined/>} size={size} placeholder="请输入账号"/>
                                </Form.Item>
                                <Form.Item name="password" rules={[{required: true, message: '请输入密码'}]}>
                                    <Input.Password prefix={<LockOutlined/>} size={size} placeholder="请输入密码"/>
                                </Form.Item>
                            </>
                        }

                    </Tabs.TabPane>
                    <Tabs.TabPane key="code" tab="验证码登录">
                        {
                            loginType === 'code' &&
                            <>
                                <Form.Item name="phone"
                                           validateTrigger={['onBlur', 'onChange']}
                                           rules={[{required: true, message: '请输入手机号'}, {
                                               pattern: /^1[\d]{10}$/,
                                               message: '手机号输入有误!',
                                               validateTrigger: 'onBlur'
                                           }]}>
                                    <Input prefix={<MobileOutlined/>} size={size} placeholder="请输入手机号"/>
                                </Form.Item>
                                <Form.Item name="code" rules={[{required: true, message: '请输入验证码'}]}>
                                    <Row gutter={12}>
                                        <Col span={14}>
                                            <Input maxlength={6} prefix={<SafetyCertificateOutlined/>} size={size}
                                                   placeholder="请输入验证码"/>
                                        </Col>
                                        <Col span={10}>
                                            <GetCaptchaButton size={size} {...getCaptchaButtonProps} />
                                        </Col>
                                    </Row>
                                </Form.Item>
                            </>
                        }
                    </Tabs.TabPane>
                </Tabs>
                <Form.Item>
                    <Button type="primary" htmlType="submit" size={size} block>登录</Button>
                </Form.Item>
            </Form>
        </LoginPage>
    );
}

export default LoginPagePhone;
